<template>
	<view>
		<!-- 选项卡 -->
		<view class="tabs-container" :style="{marginTop: (statusBarHeight) + 'px'}">
		  <view class="tabs">
		    <view 
		      class="tab-item" 
		      v-for="(tab, index) in tabsList" 
		      :key="index"
		      :class="{ active: current === index }"
		      @click="switchTab(index)"
		    >
		      {{ tab.name }}
		      <view class="tab-line" v-if="current === index"></view>
		    </view>
		  </view>
		</view>
		
		
		<!-- 内容区域 -->
<!-- 		<scroll-view 
		  class="content-scroll"
		  :style="{paddingTop: (statusBarHeight + 88) + 'px'}"
		  scroll-y 
		  @scrolltolower="loadMore"
		  :refresher-enabled="true"
		  :refresher-triggered="refreshing"
		  @refresherrefresh="refresh"
		> -->
		  <view class="content-scroll" style="padding-top: 100rpx;">
			<view v-for="(item, index) in plotOrderList" :key="index" style="margin-bottom: 20rpx;">
				<view class="adopt-item" style="margin-bottom: 20rpx;">
					<image 
						:src="item.fieldImage || 'https://img2.baidu.com/it/u=1812165992,1812165992&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'" 
						style="width: 120rpx; height: 90rpx; border-radius: 8rpx; margin-right: 20rpx;" 
						mode="aspectFill"
					/>
					<view style="flex: 1;">
						<view style="font-size: 30rpx; color: #222; font-weight: 500; margin-bottom: 8rpx;">
							{{ item.fieldName || '南部山区有机黑土地' }}
						</view>
						<view style="display: flex; align-items: center; margin-bottom: 8rpx;">
							<view style="background: #4CAF50; color: #fff; font-size: 22rpx; border-radius: 6rpx; padding: 2rpx 12rpx; margin-right: 12rpx;">
								{{ item.serviceId == 1 ? '全托管' : (item.serviceId == 2 ? '半托管' : (item.serviceId == 3 ? '不托管' : '半托管')) }}
							</view>
							<view style="font-size: 26rpx; color: #333;">
								{{ item.plotName || '黑土115号地块' }}
							</view>
						</view>
						<view style="font-size: 24rpx; color: #888; margin-bottom: 4rpx;">
							到期日期：{{ item.leastEndTime ? formatDate(item.leastEndTime) : '--' }}
						</view>
						<view style="font-size: 24rpx; color: #888;">
							租赁面积：{{ item.plotArea || '--' }}㎡
						</view>
					</view>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; padding: 0 16rpx 10rpx 16rpx;">
					<view :style="{
						color: item.plotOrderStatus === 0 ? '#4CAF50' : (item.plotOrderStatus === 1 ? '#2196F3' : '#888'),
						fontSize: '26rpx',
						marginLeft: '10rpx'
					}">
						{{ item.plotOrderStatus === 0 ? '未支付' : (item.plotOrderStatus === 1 ? '已支付' : (item.plotOrderStatus === 2 ? '已取消' : '订单已关闭')) }}
					</view>
					<button 
						style="border: 1rpx solid #4CAF50; color: #4CAF50; background: #fff; font-size: 26rpx; border-radius: 30rpx; padding: 8rpx 32rpx; height: 48rpx; line-height: 48rpx; margin-right: 10rpx; line-height: 26rpx;"
						size="mini"
						@click="goOrderDetail(item)"
					>
						订单详情
					</button>
				</view>
			</view>
		  </view>
		  
		  <!-- 加载更多 -->
<!-- 		  <u-loadmore 
		    v-if="currentList.length > 0"
		    :status="currentLoadStatus" 
		    :loadText="loadText"
		    margin-top="20"
		    margin-bottom="20"
		  />
		</scroll-view> -->
		
	</view>
</template>

<script>
import request from 'util/request.js'
	export default {
		data() {
			return {
				tabsList: [
				  { name: '全部', type: 'all'},
				  { name: '租赁中', type: 'renting'}
				],
				statusBarHeight: 0,
				current: 0,
				// 数据列表 - 分别存储不同选项卡的数据
				allData: [],        // 全部订单
				rentingData: [],   // 认养中订单
				// 每个选项卡的加载状态
				loadStatus: {
				  all: 'loadmore',
				  renting: 'loadmore',
				},
				loadText: {
				  loadmore: '点击或上拉加载更多',
				  loading: '正在加载...',
				  nomore: '没有更多了'
				},
				page: 1,
				refreshing: false,
				userId: null,
				plotOrderList: []
			}
		},
		methods: {
			//时间格式化
			formatDate(date) {
				return date ? new Date(date).toLocaleDateString() : '--';
			},
			goOrderDetail(item){
			// 跳转到订单详情界面
			uni.navigateTo({
				url: `/pages/farm/orderDetail/orderDetail?id=${item.plotOrderNum}`
			});
			},
			getPlotOrderList() {
				request({
					url: `/land-service/land/selectOrdersByUserId`,
					method: 'GET',
					data: {
						userId: this.userId,
						plotOrderStatus: 0
					}
				}).then(res => {
					if(res.code == 200) {
						this.plotOrderList = res.data.orders;
						this.plotOrderList = this.plotOrderList.map(item => ({
							...item,
							fieldImage: `http://121.36.197.175:19000/test/${item.fieldImage}`
						}))
					}
				})
			},
			// 切换选项卡
			switchTab(index) {
			  this.current = index;
			  
			  // 根据选项卡类型决定是否需要加载数据
			  const type = this.tabsList[index].type;
			  
			  console.log(`切换到选项卡: ${type}, 索引: ${index}`);
			  console.log(`当前数据状态:`, {
			    allData: this.allData.length,
			    unpaidData: this.unpaidData.length,
			    adoptingData: this.adoptingData.length,
			    completedData: this.completedData.length
			  });
			  
			  // 每次切换选项卡都重新加载最新数据
			  console.log(`切换到 ${type} 选项卡，重新加载数据`);
			  this.loadData();
			},
			// 加载更多
			loadMore() {
			  // 所有选项卡都支持加载更多
			  const currentTabType = this.tabsList[this.current].type;
			  if (this.loadStatus[currentTabType] === 'loadmore') {
			    this.page++;
			    this.loadData();
			  }
			},
		},
		computed: {
		  // 当前显示的列表
		  currentList() {
		    const type = this.tabsList[this.current].type;
		    switch (type) {
		      case 'all':
		        return this.allData;
		      case 'unpaid':
		        return this.unpaidData;
		      case 'adopting':
		        return this.adoptingData;
		      case 'completed':
		        return this.completedData;
		      default:
		        return [];
		    }
		  },
		  
		
		},
		mounted() {
			this.userId = uni.getStorageSync('userInfo').userId;
			this.getPlotOrderList();
			this.plotOrderList = this.plotOrderList.map(item => ({
				...item,
				fieldImage: `http://121.36.197.175:19000/test/${item.fieldImage}`
			}))
			console.log(this.userId)
		}
	}
</script>

<style scoped>
/* 选项卡容器 */
.tabs-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
}

/* 选项卡样式 */
.tabs {
  display: flex;
  height: 88rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #4CAF50;
  font-weight: 500;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background-color: #4CAF50;
  border-radius: 4rpx;
}
/* 内容区域 */
.content-scroll {
  box-sizing: border-box;
  height: 100vh;
  /* padding-top 通过内联样式动态设置，包含状态栏高度和选项卡高度 */
}
/* 列表项样式 */
.adopt-item {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  display: flex;
  position: relative;
}
</style>
